<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wangzm
 * @LastEditTime: 2020-02-21 11:11:53
 * @description: file content
 -->
<template>
  <base-page-view :class-name="'recommend-container ' + (listQuery.tag_name ==='爆款' ?'hot-container':'kill-container')">
    <b-image v-if="listQuery.tag_name ==='爆款'" class-name="banner" src="/static/images/home/banner_baokuan.png" mode="widthFix" :is-asset="true" />
    <b-image v-else class-name="banner" src="/static/images/home//banner_temai.png" :is-asset="true" mode="widthFix" />
    <view v-if="listQuery.tag_name ==='爆款'" class="list-block">
      <view v-for="(item, index) in list" :key="index" class="list-item" @click="toGoodsDetail(item)">
        <view class="up-part">
          <b-image class-name="item-image" :src="item.pic" mode="aspectFit" />
          <view class="item-detail">
            <view class="item-name">{{ item.title }}</view>
            <view>
              <view class="price">{{ item.vip_price | formatMoney }}</view>
              <view class="price market-price">{{ item.price | formatMoney }}</view>
            </view>
          </view>
        </view>
        <view class="down-part">
          <view class="reason">上榜理由：</view>{{ item.subtitle }}
        </view>
        <b-image v-if="index===0" class="icon" src="/static/images/icon/icon_baokuan_01.png" mode="aspectFit" :is-asset="true" />
        <b-image v-else-if="index===1" class="icon" src="/static/images/icon/icon_baokuan_02.png" mode="aspectFit" :is-asset="true" />
        <b-image v-else-if="index===2" class="icon" src="/static/images/icon/icon_baokuan_03.png" mode="aspectFit" :is-asset="true" />
      </view>
    </view>
    <view v-else class="list-block">
      <goods-item v-for="(item, index) in list" :key="index" class-name="list-item" :goods-data="item" />
    </view>
  </base-page-view>
</template>

<script>
import { debounce } from '@/utils/tools'
import { toGoods } from '@/utils/navigateTo'
import goodsItem from '@/components/goodsItem/index.vue'
import './index.scss'
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      title: '',
      listQuery: {
        tag_name: '',
        page_no: 1,
        page_size: 20
      },
      list: [],
      listState: {
        loading: false,
        more: true
      }
    }
  },
  onLoad(option) {
    console.log(option)
    this.title = decodeURIComponent(option.title || '')
    this.$setNavTitle(this.title)
    this.listQuery = {
      tag_name: decodeURIComponent(option.tag || ''),
      page_no: 1,
      page_size: 20
    }
    if (this.listQuery.tag_name) {
      this.fetchData()
    }
  },
  onPullDownRefresh() {
    this.listQuery.page_no = 1
    this.fetchData(true)
  },
  onReachBottom: debounce(function() {
    if (this.listState.more && !this.listState.loading) {
      this.listQuery.page_no++
      this.fetchData()
    }
  }, 500),
  methods: {
    async fetchData() {
      this.listState.loading = true
      const res = await this.$api.homeApi.getSubjectTag(this.listQuery)
      if (res.success && res.data) {
        if (this.listQuery.page_no === 1) {
          this.list = []
        }
        const list = res.data.goods_list || []
        this.list = this.list.concat(list)
        this.listState.more = !(list.length < this.listQuery.page_size)
      }

      setTimeout(() => {
        this.listState.loading = false
        uni.stopPullDownRefresh()
      }, 300)
    },
    toGoodsDetail(item) {
      const firstseat = uni.getStorageSync('firstseat')
      toGoods(item, 'navigateTo', {
        preseat: '商品列表',
        firstseat: firstseat || this.title
      })
    }
  }
}
</script>
